<template>
  <div>
    <el-dialog
      :title="formData.id ? '编辑楼宇' : '添加楼宇'"
      :visible="visible"
      width="500px"
      @close="$emit('update:visible',false)"
    >

      <el-form ref="formRef" :model="formData" :rules="rules" label-width="140px">
        <el-form-item label="楼宇名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入楼宇名称" />
        </el-form-item>

        <el-form-item label="楼宇层数" prop="floors">
          <el-input v-model="formData.floors" placeholder="请输入楼宇层数" />
        </el-form-item>

        <el-form-item label="在管面积" prop="area">

          <el-input v-model="formData.area" placeholder="请输入在管面积">
            <template slot="append">m²</template></el-input>

        </el-form-item>

        <el-form-item label="物业费" prop="propertyFeePrice">
          <el-input v-model="formData.propertyFeePrice" placeholder="请输入物业费">
            <template slot="append">元/m²</template>
          </el-input>
        </el-form-item>

        <el-row type="flex" justify="end">
          <el-form-item>
            <el-button @click="$emit('update:visible',false)">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
          </el-form-item>
        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addBuildAPI, changBuiAPI, delBuiAPI, getBuiDetailAPI } from '@/api/building'
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      formData: {
        name: '',
        floors: '',
        area: '',
        propertyFeePrice: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入楼宇名称', trigger: 'blur' }
        ],
        floors: [
          { required: true, message: '请输入楼宇层数', trigger: 'blur' },
          {
            trigger: 'blur',
            validator:
             async(rule, value, callback) => {
               if (value === 0) {
                 this.floors = 1
               }
               if (value >= 21) {
                 callback(new Error('楼宇层数最大为21'))
               }
             }
          }
        ],
        area: [
          { required: true, message: '请输入在管面积', trigger: 'blur' },
          {
            required: true,
            trigger: 'blur',
            validator:
            async(rule, value, callback) => {
              if (isNaN(value)) {
                this.formData.area = ''
                return
              } else if
              (value && !isNaN(value)) {
                this.formData.area = Number(value).toFixed(2)
                callback()
              } else {
                callback(new Error('在管面积不能为空'))
              }
            }
          },
          {
            trigger: 'change',
            validator:
            async(rule, value, callback) => {
              if (value.length > 8) {
                callback(new Error('不超过8位数，保留小数点后两位'))
              } else {
                callback()
              }
            }
          }
        ],
        propertyFeePrice: [
          { required: true, message: '请输入物业费', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.$refs.formRef.resetFields()
        this.formData = {
          // 手动清空formData删除功能
          name: '',
          floors: '',
          area: '',
          propertyFeePrice: ''
        }
      }
    }
  },
  created() {
  },
  methods: {
    // 删除业务
    async onDel(id) {
      await this.$confirm('确认删除吗', '温馨提示')
      await delBuiAPI(id)
      console.log(1)
      this.$message.success('删除成功')
      this.$emit('onSuccess')
    //   this.onLoad()
    },
    // 2、子组件内定义一个方法
    async onGetDetail(id) {
      const res = await getBuiDetailAPI(id)
      // 回填数据
      this.formData = {
        name: res.data.name,
        floors: res.data.floors,
        area: res.data.area,
        propertyFeePrice: res.data.propertyFeePrice,
        id: res.data.id
      }
    },
    async onChange() {
      await changBuiAPI()
    },
    async  onSubmit() {
      await this.$refs.formRef.validate()
      // TODO发请求新增
      // 调接口

      if (this.formData.id) {
        await changBuiAPI(this.formData)
      } else {
        await addBuildAPI(this.formData)
        console.log(this.formData.id)
      }

      this.$message.success(!this.formData.id ? '新增成功' : '编辑成功')
      this.$emit('update:visible', false)
      this.$emit('onSuccess')
    }
  }
}
</script>

<style>

</style>
